import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
import InsertInvitationTwoToneIcon from '@material-ui/icons/InsertInvitationTwoTone';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import { List, ListItem, ListItemText } from '@material-ui/core';
import Link from 'next/link';
import _ from 'lodash'

const useStyles = makeStyles((theme) => ({
  paper: {
    padding: '6px 16px',
  },
  secondaryTail: {
    backgroundColor: theme.palette.secondary.main,
  },
}));

const colors = [
  "secondary", "inherit", "grey", "primary"
]
// 按年为一级月为二级

export default function CustomizedTimeline({ allPostsData }) {
  const classes = useStyles();

  const [data, setData] = useState({})

  useEffect(() => {
    setData(transData(allPostsData))
  }, [allPostsData])

  return (
    <Timeline align="alternate">
      {
        Object.entries(data).reverse().map(([year, months], index) => {
          return <TimelineItem>
            <TimelineOppositeContent>
              <Typography variant="body2" color="textSecondary">
                {year}
              </Typography>
            </TimelineOppositeContent>
            <TimelineSeparator>
              <TimelineDot color={(colors[index % colors.length] as 'inherit' | 'primary' | 'secondary' | 'grey')}>
                <InsertInvitationTwoToneIcon />
              </TimelineDot>
              <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>
              <Paper elevation={3} className={classes.paper}>
                <Typography>
                  {
                    Object.entries(months).sort(([a], [b]) => Number(b) - Number(a)).map(([month, posts]) => {
                      return <div>
                        <div>{month}</div>
                        <List dense>
                          {posts.map(post => <ListItem>
                            <ListItemText
                              primary={<Link href={`/posts/${post.id}`}>
                                <a>{post.title}</a>
                              </Link>}
                              secondary={post.date}
                            />
                          </ListItem>,
                          )}
                        </List>
                      </div>
                    })
                  }
                </Typography>
              </Paper>
            </TimelineContent>
          </TimelineItem>
        })
      }
    </Timeline>
  );
}

type Posts = {
  date: 'string', // 日期
  [key: string]: any
}

type output = {
  [year: string]: {
    [month: string]: Posts[]
  }
}

function transData(data: Posts[]): output {
  const output: output = {}
  data.forEach(item => {
    const { date } = item
    // 截取年
    const year = date.slice(0, 4)
    const month = date.slice(5, 7)

    output?.[year]?.[month]?.length > 0
      ? output?.[year]?.[month]?.push(item)
      : _.setWith(output, [year, month + ''], [item], Object)
  })
  return output
}

